<template>
<div>
		<!-- 头部 -->
	<el-form ref="form" :model="form" label-width="180px" >
  <el-form-item label="用户名" >
    <el-input v-model="form.username" width="100px" :disabled="true" size="medium" class='width-input-my'></el-input>
  </el-form-item>
    <el-form-item label="董事级别" >
    <el-input v-model="form.levelTitle" width="100px" :disabled="true" size="medium" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="联系电话">
    <el-input v-model="form.cellphone" :disabled="true" class='width-input-my'></el-input>
  </el-form-item>

  <!-- 钱包 -->
    <el-form-item label="账户余额">
    <el-input v-model="form.balance" class='width-input-my' :disabled="true"></el-input>
  </el-form-item>
    <el-form-item label="积分余额">
    <el-input v-model="form.point" class='width-input-my' :disabled="true"></el-input>
  </el-form-item>
    <el-form-item label="电子币余额">
    <el-input v-model="form.emoney" class='width-input-my' :disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="支付密码">
    <el-input v-model="form.paypassForModify" class='width-input-my' type='password'></el-input>
  </el-form-item>
  <!-- 钱包 -->

  <!-- 银行卡 -->
  <el-form-item label="银行卡号">
    <el-input v-model="form.bankNumber" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="银行名称">
    <el-input v-model="form.bankName" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="开户行">
    <el-input v-model="form.bankAddress" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="持卡人">
    <el-input v-model="form.cardholder" class='width-input-my'></el-input>
  </el-form-item>
  <!-- 银行卡 -->

  <!-- 地址 -->
  <!-- <el-form-item label="省">
    <el-select filterable v-model="form.province" filterable placeholder="请输入省" class="w-200">
      <el-option v-for="option in selectData.province" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="市">
    <el-select filterable v-model="form.city" filterable placeholder="请输入市" class="w-200" >
      <el-option v-for="option in selectData.city" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="区">
    <el-select filterable v-model="form.hometown" filterable placeholder="请输入区" class="w-200" >
      <el-option v-for="option in selectData.hometown" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="详细地址">
    <el-input v-model="form.detailAddress"  type="textarea" autosize class='width-input-my'></el-input>
  </el-form-item> -->
  <!-- 地址 -->

  <el-form-item>
    <el-button type="primary" @click="onSubmit">保存修改</el-button>
  </el-form-item>
</el-form>

</div>
</template>

<script>
import http from "assets/js/http.js";
import cities from "assets/data/address.json";

export default {
  data() {
    return {
      selectData: {
        province: [],
        city: [],
        hometown: []
      },
      form: {
        province: "",
        city: "",
        hometown: null
      }
    };
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    init() {
      // 监听省
      this.$watch("form.province", {
        deep: true,
        handler: function() {
          this.getClearCity();
        }
      });
      // 监听市
      this.$watch("form.city", {
        deep: true,
        handler: function() {
          this.getClearHomwtown();
        }
      });
    },
    onSubmit() {
       this.apiPut(
        'pudu/members' + '/',
        '1',
        this.form
      ).then(res => {
        this.handelResponse(res, data => {
          console.log(res);
          _g.toastMsg('success', '编辑成功')
        })
      })
    },
    getPersonInfo() {
      let url = "pudu/members/1";
      this.apiGet(url).then(res => {
        this.handelResponse(res, data => {
          for (let i in data) {
            if (i == "level") {
              switch (data[i]) {
                case 0:
                  data.levelTitle = "非董事";
                  break;
                case 1:
                  data.levelTitle = "一星董事";
                  break;
                case 2:
                  data.levelTitle = "二星董事";
                  break;
                case 3:
                  data.levelTitle = "三星董事";
                  break;
                case 4:
                  data.levelTitle = "四星董事";
                  break;
                case 5:
                  data.levelTitle = "五星董事";
                  break;
                case 6:
                  data.levelTitle = "六星董事";
                  break;
                case 7:
                  data.levelTitle = "七星董事";
                  break;
              }
            }
          }
          this.form = data;
          this.getAddress();
          this.getCity();
          this.getHomwtown();
          this.init();
          _g.closeGlobalLoading();
        });
      });
    },
    getCity() {
      // TODO 清除已有的市信息
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province]) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.city[this.selectData.city.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getHomwtown() {
      // TODO 清除已有的市信息
      this.selectData.hometown = [];
      console.log(cities[this.form.province][this.form.city]);
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province][this.form.city]) {
        tmp.label = cities[this.form.province][this.form.city][i];
        tmp.value = cities[this.form.province][this.form.city][i];
        this.selectData.hometown[this.selectData.hometown.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getClearCity() {
      // TODO 清除已有的市信息
      this.selectData.city = [];
      this.form.city = "";
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province]) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.city[this.selectData.city.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getClearHomwtown() {
      this.form.hometown = "";
      // TODO 清除已有的市信息
      this.selectData.hometown = [];
      console.log(cities[this.form.province][this.form.city]);
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province][this.form.city]) {
        tmp.label = cities[this.form.province][this.form.city][i];
        tmp.value = cities[this.form.province][this.form.city][i];
        this.selectData.hometown[this.selectData.hometown.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getAddress() {
      let tmp = {};
      // 获取省的数据
      for (let i in cities) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.province[this.selectData.province.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
      console.log(this.selectData.province);
    }
  },
  mixins: [http]
};
</script>

<style>
.width-input-my {
  width: 200px;
}
</style>
